<template>
  <div class="card-box">
    <el-dialog title="导出规划物业" :visible.sync="dialogVisible" :close-on-click-modal="false">
      <div class="card-title">请选择导出的字段名称</div>
      <div>
        <el-input type="input" v-model="field" placeholder="搜索字段名称" style="width: 300px;margin: 10px 15px;"></el-input>
        <el-button size="mini" type="primary" @click="rest" style="float: right;margin-top: 10px; margin-bottom: 10px">重置</el-button>
      </div>
      <div>
        <el-table
          ref="planningPropertyExport"
          :data="tableData"
          @selection-change="selectionChange"
          size="small"
          :header-cell-style="{'text-align':'center' }"
          :row-style="{height:'35px'}"
          :cell-style="{'text-align':'center', 'height':'22px'}"
          select-on-indeterminate
          row-key
        >
          <el-table-column type="selection" width="50" value="val" :reserve-selection="true"></el-table-column>
          <el-table-column label="序号" type="index" width="100" align="center"></el-table-column>
          <el-table-column label="字段名称" prop="field"></el-table-column>
        </el-table>
      </div>
      <div class="card-box" style="text-align: right;padding-top: 20px">
        <el-button size="mini" @click="dialogVisible=false">取 消</el-button>
        <el-button size="mini" type="primary" @click="commit">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import pager from '@/assets/vue-mixin/pager'
export default {
  name: "planning-export",
  mixins: [pager],
  data () {
    return {
      selectionList: [],
      select: [],
      searchForm: {},
      dialogVisible: false,
      field: '',
      initData: [
        { field: "物业编号", val: "1" },
        { field: "物业名称", val: "2" },
        { field: "物业面积", val: "3" },
        { field: "物业类型", val: "4" },
        { field: "物业街道", val: "5" },
        { field: "物业位置", val: "6" },
      ],
      tableData: [
        { field: "物业编号", val: "1" },
        { field: "物业名称", val: "2" },
        { field: "物业面积", val: "3" },
        { field: "物业类型", val: "4" },
        { field: "物业街道", val: "5" },
        { field: "物业位置", val: "6" },
      ]
    }
  },
  methods: {
    getListData () { },
    show (item) {
      this.searchForm = item
      this.dialogVisible = true
      this.$nextTick(() => {
        this.tableData.map(data => this.$refs.planningPropertyExport.toggleRowSelection(data, true))
      })

    },
    rest () {
      this.$refs.planningPropertyExport.clearSelection()
    },
    commit () {
      if (this.selectionList == 0) {
        alert('请选择要导出的字段')
      } else {
        let ids = this.selectionList.map(item => item.val)
        this.publicExport('规划物业', '/api/planproject/download', { ...this.searchForm, id: ids })
      }
    },
    toggleSelection (rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row, true);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
  },
  watch: {
    selectionList () {
      this.select = this.selectionList
    },
    field () {
      if (this.field == '') {
        this.tableData = this.initData
        this.toggleSelection(this.select)
      }
      this.tableData = this.tableData.filter(table => {
        return table.field.includes(this.field)
      })
    }
  }
}
</script>

